<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<title>Drop-down menu</title>
		<style>
		table {
				padding: 0;
				margin: 0;
				border: 0;
				cellspacing: 0;
				cellpadding: 2;
			}
			
			.menu {
				display: none;
				background-color: #ff0;
				width: 202px;
				border: 1px solid black;
				margin-left: 2px;
			}
			
			.menu ul {
				list-style: none;
			}
			
			td {
				width: 200px;
				text-align: center;
				background-color: aqua;
				border: 1px solid blue;
				margin: 0;
			}
		</style>
		<script type="text/javascript">
			function showMenu() {
				var vMenu = document.getElementById('vMenu');
				vMenu.style.position = "absolute";
				vMenu.style.top = "30px";
				vMenu.style.display = "block";
			}
			function hideMenu() {
				var vMenu = document.getElementById('vMenu');
				vMenu.style.display = "none";
			}
			
			function showMenu2() {
				var vMenu2 = document.getElementById('vMenu2');
				vMenu2.style.position = "absolute";
				vMenu2.style.top = "30px";
				vMenu2.style.left = "214px";
				vMenu2.style.display = "block";
			}
			function hideMenu2() {
				var vMenu2 = document.getElementById('vMenu2');
				vMenu2.style.display = "none";
			}
			
			function showMenu3() {
				var vMenu3 = document.getElementById('vMenu3');
				vMenu3.style.position = "absolute";
				vMenu3.style.top = "30px";
				vMenu3.style.left = "420px";
				vMenu3.style.display = "block";
			}
			function hideMenu3() {
				var vMenu3 = document.getElementById('vMenu3');
				vMenu3.style.display = "none";
			}
			
			function showMenu4() {
				var vMenu4 = document.getElementById('vMenu4');
				vMenu4.style.position = "absolute";
				vMenu4.style.top = "30px";
				vMenu4.style.left = "626px";
				vMenu4.style.display = "block";
			}
			function hideMenu4() {
				var vMenu4 = document.getElementById('vMenu4');
				vMenu4.style.display = "none";
			}
		</script>
	</head>
	<body>
		<table>
			<tr>
				<td onmouseover="showMenu()" onmouseout="hideMenu()">
					Menu 1
				</td>
				<td onmouseover="showMenu2()" onmouseout="hideMenu2()">
					Menu 2
				</td>
				<td onmouseover="showMenu3()" onmouseout="hideMenu3()">
					Menu 3
				</td>
				<td onmouseover="showMenu4()" onmouseout="hideMenu4()">
					Menu 4
				</td>
			</tr>
		</table>
		<div class="menu" id="vMenu" onmouseover="showMenu()" onmouseout="hideMenu()">
			<ul>
				<li><a href="#">menu sub item 1</a></li>
				<li><a href="#">menu sub item 2</a></li>
				<li><a href="#">menu sub item 3</a></li>
				<li><a href="#">menu sub item 4</a></li>
			</ul>
		</div>
		<div class="menu" id="vMenu2" onmouseover="showMenu2()" onmouseout="hideMenu2()">
			<ul>
				<li><a href="#">menu sub item 1</a></li>
				<li><a href="#">menu sub item 2</a></li>
				<li><a href="#">menu sub item 3</a></li>
				<li><a href="#">menu sub item 4</a></li>
			</ul>	
		</div>
		<div class="menu" id="vMenu3" onmouseover="showMenu3()" onmouseout="hideMenu3()">
			<ul>
			<li><a href="#">menu sub item 1</a></li>
			<li><a href="#">menu sub item 2</a></li>
			<li><a href="#">menu sub item 3</a></li>
			<li><a href="#">menu sub item 4</a></li>
		</div>
		<div class="menu" id="vMenu4" onmouseover="showMenu4()" onmouseout="hideMenu4()">
			<ul>
			<li><a href="#">menu sub item 1</a></li>
			<li><a href="#">menu sub item 2</a></li>
			<li><a href="#">menu sub item 3</a></li>
			<li><a href="#">menu sub item 4</a></li>
		</div>
	</body>
</html>